<template>
  <div class="bottom">
    <div id="left">
      <p>库存使用情况</p>
      <div id="left-echarts" />
    </div>
    <div id="right">
      <p>库区使用情况</p>
      <div id="right-echarts" />
    </div>
  </div>
</template>

<script>
import { areaUseStatus, stockUseStatus } from '@/api'
export default {
  data() {
    return {
      stockList: []
    }
  },
  // mounted() {
  //   this.leftEcharts()
  //   this.rightEcharts()
  // },
  async created() {
    await this.apiFn()
    this.leftEcharts()
    this.rightEcharts()
  },
  methods: {
    // 接口
    async  apiFn() {
      const res = await areaUseStatus()
      console.log(res)
      const res1 = await stockUseStatus()
      this.stockList = res1.data.data
    },
    // 饼图
    leftEcharts() {
      // 获取组件实例
      const machart = this.$echarts.init(document.getElementById('left-echarts'))
      // 设置配置项
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} <br/> 总站比 {d}%'
        },
        color: ['#e4dbda', '#fca91b'],
        series: [{
          type: 'pie',
          data: this.stockList,
          center: ['50%', '50%'],
          radius: ['47%', '64%'],
          labelLine: {
            show: false
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '20',
              fontWeight: 'bold',
              color: 'inherit'
            }
          }
        }]

      }
      // 复制
      machart.setOption(option)
      // 根据页面大小自动响应图表大小
      window.addEventListener('resize', function() {
        machart.resize()
      })
    },
    rightEcharts() {
      // 获取组件实例
      const machart = this.$echarts.init(document.getElementById('right-echarts'))
      // 设置配置项
      const option = {
        legend: {
          orient: 'vertical',
          top: 'middle',
          left: '50%',
          formatter: function(name) {
            return name
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {d}%'
        },
        series: [{
          type: 'pie',
          data: [{
            value: 335,
            name: 'Apple'
          }, {
            value: 310,
            name: 'Grapes'
          }, {
            value: 234,
            name: 'Pineapples'
          }, {
            value: 135,
            name: 'Oranges'
          }, {
            value: 1548,
            name: 'Bananas'
          }],
          left: '10%',
          width: '30%',
          labelLine: {
            show: false
          },
          label: {
            position: 'inside',
            formatter: '{c}',
            color: '#fff'
          }

        }
        ]
      }
      // 复制
      machart.setOption(option)
      // 根据页面大小自动响应图表大小
      window.addEventListener('resize', function() {
        machart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 20px 0;
    height: 354px;
    #left{
    width: 30%;
    height: 354px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    border-radius: 12px;
    padding: 25px;
    margin-right: 30px;
    #left-echarts{
      height: 100%;
    }
    }
    #right{
    width: 70%;
    height: 354px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    border-radius: 12px;
    padding: 25px;
    #right-echarts{
      height: 100%;
    }
    }

  }

</style>
